<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sign Up</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<script>
    $(document).ready(function () {
        ok=false;
        $("#user").blur(function () {
            var a=$(this).val();
            var b=$("#checkuser");
            if(a===""){
                b.css("color","red");
                b.text("用户名不能为空！");
                ok=false;
            }else{
                flag=false;
                for(var i=0;i<localStorage.length;i++){
                    var key=localStorage.key(i);
                    var ss=localStorage.getItem(key);
                    var data=JSON.parse(ss);
                    if(a===data.user)
                    {
                        flag=true;
                        break;
                    }
                }
                if(flag) {
                    b.css("color","red");
                    b.text("此用户名已存在!");
                    ok=false;
                } else b.text("");
                ok=true;
            }
        });

        $("#password").blur(function () {
            var a=$(this).val();
            var L=a.length;
            var b=$("#passwordcheck");
            if(a===""){
                b.css("color","red");
                b.text("密码不能为空！");
                ok=false;
            } else if(L<6){
                b.css("color","red");
                b.text("密码长度至少为6位！");
                ok=false;
            }else if(L>16){
                b.css("color","red");
                b.text("密码长度不能大于16位！");
                ok=false;
            }else{
                var reg=/^[0-9]{6,16}$|^[a-zA-Z]{6,16}$/; //全是数字或全是字母 6-16个字符
                var reg1=/^[A-Za-z0-9]{6,16}$/; //数字、26个英文字母 6-16个字符
                var reg2=/^\w{6,16}$/;
                if(a.match(reg)){
                    b.css("color","red");
                    b.text("密码强度：弱");
                    ok=true;
                }else if(a.match(reg1)){
                    b.css("color","orange");
                    b.text("密码强度：中");
                    ok=true;
                }else {
                    b.css("color","blue");
                    b.text("密码强度：强");
                    ok=true;
                }
            }
        });

        $("#password2").blur(function () {
            var a=$("#password").val();
            var z=$(this).val();
            var b=$("#password2check");
            if(a!==z){
                b.css("color","red");
                b.text("两次输入的密码不一致");
                ok=false;
            }else if(z===""){
                b.css("color","red");
                b.text("重新输入密码不能为空！");
                ok=false;
            }
            else{
                b.text("");
                ok=true;
            }
        });

        $("#email").blur(function () {
            var a=$(this).val();
            var b=$("#checkemail");
            if(a==="") {
                b.css("color", "red");
                b.text("邮箱不能为空!");
                ok=false;
            }else{
                var regm = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
                isok=a.match(regm);
                if(isok){
                    b.text("");
                    ok=true;
                }else {
                    b.css("color","red");
                    b.text("邮箱不合法!");
                    ok=false;
                }
            }
        });

        $("#btn").click(function () {
            if(ok){
                var data=new Object();
                data.user=$("#user").val();
                data.password=$("#password").val();
                data.mail=$("#email").val();
                data.str=JSON.stringify(data);
                localStorage.setItem("userID"+$("#user").val(),data.str);
                $(this).attr("href","sign_up_success.html");
            }else{
                $(this).attr("href","sign_up_fail.html");
            }
        });

    });
</script>
<body>
<div class="weui-cells">
    <div class="weui-cell">
        <div class="weui-cell__hd"><img src="sinUp.jpg" style="width: 80px;height: 80px"></div>
        <div class="weui-cell__bd">
            <p>创建账号</p>
        </div>
    </div>
</div>
<div class="weui-cells weui-cells_form">
    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">用户名</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" id="user" placeholder="请输入用户名">
        </div>
        <span class="check" id="checkuser"></span>
    </div>
    <div class="weui-cell ">
        <div class="weui-cell__hd"><label class="weui-label">密码</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="password" id="password" placeholder="请输入密码">
        </div>
        <span class="check" id="passwordcheck"></span>
    </div>
    <div class="weui-cell ">
        <div class="weui-cell__hd"><label class="weui-label">确认密码</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="password" id="password2" placeholder="重新输入密码" >
        </div>
        <span class="check" id="password2check"></span>
    </div>

    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">邮箱</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="email" id="email" placeholder="请输入邮箱">
        </div>
        <span class="check" id="checkemail"></span>
    </div>
</div>
<a class="weui-btn weui-btn_primary" id="btn">创建</a>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.0.1/js/jquery-weui.min.js"></script>
</body>
</html>